<template>
  <div class="">
    <van-nav-bar title="创建营销内容" fixed></van-nav-bar>

    <header v-if="isPower !== 3">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiperArr" :key="index">
          <a :href="item.linkUrl">
            <img :src="$publicObj.urlImg(item.url)" alt="" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </header>

    <main v-if="isPower !== 3">
      <div class="title">
        <van-divider>获客工具</van-divider>
        <div class="itmes">
          <div class="item" @click="$router.push('/addAticle')">
            <img
              src="../../assets/images/marketing/marketing_article.png"
              alt=""
            />
            <span>新建文章</span>
          </div>
          <div class="item" @click="$router.push('/addPoster')">
            <img
              src="../../assets/images/marketing/marketing_post.png"
              alt=""
            />
            <span>新建海报</span>
          </div>
          <div class="item" @click="$router.push('/addVideo')">
            <img
              src="../../assets/images/marketing/marketing_video.png"
              alt=""
            />
            <span>新建视频</span>
          </div>
          <div class="item" @click="$router.push('/noActivity')">
            <img src="../../assets/images/invite/xinjianhuodong.png" alt="" />
            <span>新建活动</span>
          </div>
          <div class="item" @click="$router.push('/addRecruitment')">
            <img src="../../assets/images/invite/xinjianzhaopin.png" alt="" />
            <span>新建招聘</span>
          </div>
        </div>
        <van-divider />
        <div class="link">
          <img src="../../assets/images/marketing/marketing_share.png" alt="" />
          <input type="text" placeholder="点击并长按这里，粘贴文章链接" />
        </div>
        <button>上传微信文章链接</button>
      </div>
      <div class="content">
        <van-divider>使用教程</van-divider>
        <p>
          1.打开需要上传的微信文章，点击右上角的“...”并选择
          <a href="">复制链接</a>
        </p>
        <img src="../../assets/images/marketing/marketing_one.png" alt="" />
        <p>2.复制链接上传后，点击文章进入详情分享给微信好友。</p>
        <img src="../../assets/images/marketing/marketing_two.png" alt="" />
      </div>
    </main>
    <no-login v-if="isPower == 3 && this.info == ' '"></no-login>
  </div>
</template>

<script>
import noLogin from "../../components/noLogin.vue";
export default {
  components: { noLogin },
  name: "",
  data() {
    return {
      isPower: 2,
      info: "",
      swiperArr: [], //轮播图
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    await this.isCustomer();
    await this.getswiperArr();
    if (this.isPower == 3 && this.info != " ") {
      return this.$router.push("/mineInstructions");
    }
  },
  methods: {
    //获取轮播图数据
    getswiperArr() {
      this.swiperArr = this.$store.state.userInfo.systemCoverList.map(
        (item) => {
          return { url: item.url, linkUrl: item.linkUrl };
        }
      );
    },
    //判断是否有权限创建
    async isCustomer() {
      let userWxData = JSON.parse(sessionStorage.getItem("userWxData"));
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: userWxData.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
      this.info = res.info;
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.my-swipe {
  height: 200px;
  width: 100%;
  .van-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.van-divider {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #333333;
}
header {
  margin-top: 46px;
  width: 100%;
  height: 310px;
  img {
    width: 100%;
    height: 100%;
  }
}
main {
  padding: 0 15px;
  text-align: center;
  .title {
    padding: 15px 27px 30px 27px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    margin-top: -100px;
    position: relative;
    z-index: 1;

    .itmes {
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
      flex-wrap: wrap;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.3%;
        margin-top: 20px;
        img {
          width: 43px;
          height: 43px;
        }
        span {
          margin-top: 10px;
          font-size: 10px;
          color: #333333;
          line-height: 18px;
        }
      }
    }
    .link {
      height: 50px;
      background-color: #f6f4f5;
      border-radius: 5px;
      padding: 15px 18px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      input {
        flex: 1;
        background-color: #f6f4f5;
        font-size: 11px;
        line-height: 44px;
        border: none;
        margin-left: 15px;
        &::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #bebebe;
        }
      }
      img {
        width: 20px;
        height: 20px;
      }
    }
    button {
      margin-top: 30px;
      width: 275px;
      height: 40px;
      background: #0482fe;
      border-radius: 20px;
      font-size: 14px;
      color: #ffffff;
      line-height: 22px;
      border: none;
    }
  }
  .content {
    margin: 30px 0 70px;
    text-align: center;
    padding: 0 30px;
    p {
      font-size: 11px;
      color: #999999;
      line-height: 22px;
      text-align: left;
      a {
        color: #0482fe;
      }
    }
    img {
      width: 165px;
      height: 344px;
    }
  }
}
</style>
